{% extends "base.html" %}
{% block title %}待办事项{% endblock %}

{% block content %}
    <div class="container">
        <h1 class="pager">待办事项</h1>

        <div class="row">
            <h2 class="page-header">您的待办事项</h2>
            {% if todos %}
                <table class="table">
                    <tr>
                        <th>名称</th>
                        <th>重要级别</th>
                        <th>详情</th>
                        <th>操作</th>
                    </tr>
                    {% for todo in todos %}
                        <tr>
                            <td>{{ todo.title }}</td>
                            <td>{{ todo.text_importance }}</td>
                            <td>{{ todo.description }}</td>
                            <td><a onclick="remove_todo('{{ todo.title }}')" class="glyphicon glyphicon-remove"></a>
                            </td>
                        </tr>
                    {% endfor %}
                </table>
            {% else %}
                <span class="text-danger">You have nothing to do!</span>
            {% endif %}
        </div>

        <div class="row">
            <h2 class="page-header">添加待办事项</h2>

            <div class="form-group">
                <label for="todo_title">待办事项</label>
                <input type="text" class="form-control" id="todo_title" placeholder="名称">
            </div>

            <div class="form-group">
                <label for="todo_importance">重要程度</label>
                <select id="todo_importance" class="form-control">
                    {% for value,importance in choices %}
                        <option value="{{ value }}">{{ importance }}</option>
                    {% endfor %}
                </select>
            </div>

            <div class="form-group">
                <label for="todo_description">详情</label>
                <input type="text" class="form-control" id="todo_description" placeholder="详情">
            </div>

            <input type="submit" value="添加" id="submit" class=" btn btn-primary">
            <input type="reset" value="重置" class=" btn btn-primary">

        </div>

    </div>

    <script>
        $("#submit").click(function () {
            title = $("#todo_title").val();
            description = $("#todo_description").val();
            importance = $("#todo_importance").val();
            if (title == "") {
                alert("标题不能为空");
            } else if (description == "") {
                alert("描述不能为空");
            } else {
                $.post("{% url 'todo:add' %}", {
                    "title": title,
                    "description": description,
                    "importance": importance
                }, function (ret) {
                    if (ret == "True") {
                        alert("添加成功");
                        location.reload();
                    } else {
                        alert("添加失败");
                    }
                });
            }
        });

        function remove_todo(title) {
            if (confirm("确定删除待办事项：" + title)) {

                $.post("{% url 'todo:remove' %}", {"title": title}, function (ret) {
                    if (ret == "True") {
                        alert("删除成功");
                        location.reload();
                    } else {
                        alert("删除失败：" + e);
                    }
                });
            }
        }
    </script>
{% endblock %}

